<template>
  <div class="counter">
    <h1 class="page-title">Vuex 计数器示例</h1>
    
    <div class="card">
      <h2>基础计数器</h2>
      <div style="text-align: center; margin: 2rem 0;">
        <div style="font-size: 3rem; font-weight: bold; color: #42b983; margin-bottom: 1rem;">
          {{ count }}
        </div>
        <div style="font-size: 1.2rem; color: #666; margin-bottom: 2rem;">
          当前数值: {{ count }}
        </div>
        
        <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
          <button class="btn" @click="increment">增加</button>
          <button class="btn btn-secondary" @click="decrement">减少</button>
          <button class="btn btn-secondary" @click="reset">重置</button>
        </div>
      </div>
    </div>

    <div class="card">
      <h2>计算属性</h2>
      <div style="margin-top: 1rem;">
        <p><strong>双倍值:</strong> {{ doubleCount }}</p>
        <p><strong>奇偶性:</strong> {{ isEven ? '偶数' : '奇数' }}</p>
      </div>
    </div>

    <div class="card">
      <h2>使用说明</h2>
      <ul style="margin-top: 1rem; padding-left: 1.5rem; line-height: 1.8;">
        <li>点击"增加"按钮：数值 +1</li>
        <li>点击"减少"按钮：数值 -1</li>
        <li>点击"重置"按钮：数值归零</li>
        <li>双倍值：当前数值 × 2</li>
        <li>奇偶性：判断当前数值是奇数还是偶数</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex';

export default {
  name: 'Counter',
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount', 'isEven']),
  },
  methods: {
    ...mapActions(['increment', 'decrement', 'reset']),
  },
};
</script>
